<template>
  <div>
    <common-card
      :title="$t('dashboard.totalArticleHits')"
      :value="this.totalClick"
    >
      <!-- 底部数据 -->
      <template v-slot:footer>
        <span>{{ $t("dashboard.articleLikes") }} </span>
        <span class="emphasis">{{ totalLike }}</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import homeview from "@/api/homeview";
import CommonCard from "../CommonCard";
export default {
  name: "index",
  components: {
    CommonCard,
  },
  data() {
    return {
      chartInstance: null,
      allData: {},
      totalClick: 0, //文章总点击量
      totalLike: 0, //文章总点赞量
      startValue: 0, // 区域缩放的起点值
      endValue: 8, // 区域缩放的终点值
      timerId: null, // 定时器的标识
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取服务器的数据
    getData() {
      homeview
        .getArticleClickAndLike()
        .then((res) => {
          this.allData = res.data.list;
          // console.log(this.allData);

          this.totalClick = res.data.list.clink.reduce(function (prev, curr) {
            return prev + curr;
          });
          this.totalLike = res.data.list.likes.reduce(function (prev, curr) {
            return prev + curr;
          });

          //从大到小进行
          this.allData.clink.sort((a, b) => {
            return b - a;
          });
        })
        .catch((error) => {
          console.log("error");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
